<template>
    <div>
      <el-card class="box-card" style="width: 400px">
        <div slot="header" class="clearfix">
          <span>{{ hr.name }}</span>
        </div>
        <div>
          <div style="display: flex;justify-content: center;margin-bottom: 20px" >
            <el-upload
                class="upload-demo"
                action="/hr/userface"
                :on-success="Onsuccess"
                :show-file-list="false"
            ><img title="点击头像修头像" :src="hr.userface" style="width: 100px;height: 100px;border-radius: 50px;" alt="头像">
            </el-upload>
          </div>
          <div>电话号码: <el-tag>{{hr.telephone}}</el-tag></div>
          <div>手机号码: <el-tag>{{hr.phone}}</el-tag></div>
          <div>居住地址: <el-tag>{{hr.address}}</el-tag></div>
          <div>用户标签：<el-tag type="success" style="margin-right: 5px" v-for="(r,index) in hr.roles" :key="index">{{r.nameZh}}</el-tag></div>
        </div>
        <div style="margin-top: 20px">
          <el-button type="primary" @click="showUpdateHrInfoView">修改信息</el-button>
          <el-button @click="showUpdatePassword">修改密码</el-button>
        </div>
      </el-card>
      <el-dialog
          title="修改用户信息"
          :visible.sync="dialogVisible"
          width="30%">
        <div>
          <table>
            <tr>
              <td>
                <el-tag>用户昵称：</el-tag>
              </td>
              <td>
                <el-input v-model="hr2.name"></el-input>
              </td>
            </tr>
            <tr>
              <td>
                <el-tag>电话号码：</el-tag>
              </td>
              <td>
                <el-input v-model="hr2.telephone"></el-input>
              </td>
            </tr>
            <tr>
              <td>
                <el-tag>手机号码：</el-tag>
              </td>
              <td>
                <el-input v-model="hr2.phone"></el-input>
              </td>
            </tr>
            <tr>
              <td>
                <el-tag>用户地址：</el-tag>
              </td>
              <td>
                <el-input v-model="hr2.address"></el-input>
              </td>
            </tr>
          </table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateHrInfo">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
          title="修改密码"
          :visible.sync="passwdDialogVisible"
          width="30%">

        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="请输入旧密码" prop="oldpass">
            <el-input type="password" v-model="ruleForm.oldpass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="请输入新密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
</template>

<script>
export default {
name: "HrInfo",
  data(){
    /**
     * 定义两个表单验证的规则
     * @param rule
     * @param value
     * @param callback
     */
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    /**
     * 定义两个表单验证的规则
     * @param rule
     * @param value
     * @param callback
     */
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      hr: null,
      hr2: null,//为了防止Vue的动态绑定导致原有的Hr发生数据变化，更新用户信息的数据修改为hr2
      dialogVisible :false,
      passwdDialogVisible: false,
      //校验信息
      rules: {
        oldpass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ]
      },
      ruleForm:{
        oldpass:"",
        pass: "",
        checkPass:""
      },
      imageUrl: ''
    }

  },
  mounted() {
    this.initHr();
  },
    methods:{
      /**
       * 刷新数据的的方法
       * */
      Onsuccess(){
        this.initHr()
      },

      /**
       * 重置的方法
       * */
      resetForm(formName){
        this.$refs[formName].resetFields();//ElementUI重置表单的方法
      },
      /**
       * 提交方法
       * */
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if(valid){
            this.ruleForm.hrid = this.hr.id
            this.putRequest("/hr/updatepass",this.ruleForm).then(resp => {
                if(resp){
                  //如果成功修改那么就发送注销按钮然后跳转到登录页面
                  this.getRequest("/logout");
                  window.sessionStorage.removeItem("user");//把user从sessionStorage中移除
                  this.$store.commit('initRoutes',[])//并且需要重新初始化菜单，防止别人登录出现，上一个用户菜单
                  this.$router.replace("/")//跳转到登录页面
                }
            })
          }
        })
      },
      showUpdatePassword(){
        this.passwdDialogVisible = true;
      },
      /**
       * 更新Hr的InfO
       */
    updateHrInfo(){
        this.putRequest("/hr/info",this.hr2).then(resp => {
          if(resp){
              this.dialogVisible = false;
              this.initHr();
          }
        })
    },
    showUpdateHrInfoView(){
      this.dialogVisible = true;
    },
    initHr(){
      this.getRequest("/hr/info").then(resp => {
        if(resp){
          console.log(resp);
          this.hr = resp;
          this.hr2 = Object.assign({},this.hr);//这里不能使用 this.hr2 = hr2; 这样还是会指向同一个对象
          //更新Vuex中的数据
          this.$store.commit("INIT_CURRENTHR",resp);
        }
      })
    }
  }

}
</script>

<style scoped>
.el-tag{
  margin-top: 5px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 178px;
  text-align: center;

}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
